<template>
  <div id="app" v-bind:style="appDivStyle">
      <div class="context" ref="context">
           <div class="queryBox" ref="queryBox">
                <el-form :inline="true" :model="formQueryCondition"
                         ref="form" size="mini">
                    <el-form-item :label="$t('Organization.queryLabel.organizationName')"   :label-width="queryformLabelWidth">
                        <el-input v-model.trim="formQueryCondition.organizationName.val" class="queryItemStyle" clearable
                                  :placeholder="$t('Organization.queryLabel.placeholderOrganization')">
                        </el-input>
                    </el-form-item>
                    <el-form-item :label="$t('Organization.queryLabel.status')"  :label-width="queryformLabelWidth">
                        <el-select v-model="formQueryCondition.status.val" class="queryItemStyle">
                            <el-option :label="$t('label.all')" value=""></el-option>
                            <el-option :label="$t('label.available')" value="Available"></el-option>
                            <el-option :label="$t('label.invalid')" value="Invalid"></el-option>
                        </el-select>
                    </el-form-item>


                    <div style="text-align:right">
                        <el-form-item>
                            <el-button type="primary" v-if="test('onNewBtn')"
                            @click="onNew">{{ $t('btnText.newBtnText') }}</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onReset('form')">{{ $t('btnText.resetBtnText') }}</el-button>
                        </el-form-item>
                        <!-- <el-form-item>
                            <el-button type="primary" @click="onExport" icon="el-icon-download" :loading="loading">{{ $t('btnText.exportBtnText') }}</el-button>
                        </el-form-item> -->
                        <el-form-item>
                            <el-button type="primary" @click="onQuery" icon="el-icon-search" :loading="loading">{{ $t('btnText.queryBtnText') }}</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <div class="dataBox" ref="dataBox">

                <transition enter-active-class="animated zoomIn" leave-active-class="animated rotateOut">
                    <el-table v-if="isInit" ref="singleTable"
                                :data="tableData"
                                :height="tableHeight"
                                @sort-change="sortChange"
                                v-loading="loading" size="mini"
                                style="width: 100%;" stripe=stripe border=border>
                        <el-table-column type="index"  width="50" fixed="left"
                                            :label="$t('table.xh')" align="center">
                        </el-table-column>
                        <el-table-column :label="$t('table.op')" fixed="left" min-width="200">
                            <template slot-scope="scope">
                                <el-button size="gv" icon="fa fa-edit" :loading="loading"
                                @click="authorize(scope.$index, scope.row)"
                                            >{{ $t('btnText.authorizationBtnText') }}</el-button>
                                <el-button size="gv" icon="el-icon-edit" :loading="loading"
                                @click="edit(scope.$index, scope.row)"
                                            >{{ $t('btnText.editBtnText') }}</el-button>
                                <!-- <el-button size="gv" icon="el-icon-delete"
                                            type="danger" :loading="loading" @click="deleteRow(scope.$index, scope.row)"
                                            >{{ $t('btnText.deleteBtnText') }}</el-button> -->
                                <el-button size="gv" icon="el-icon-delete"
                                            type="danger" :loading="loading" @click="logoffRow(scope.$index, scope.row)"
                                            >{{ $t('btnText.logoffBtnText') }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="organizationCode" min-width="140" fixed="left"
                                            :label="$t('Organization.table.organizationCode')" sortable="custom" sort-by="organizationCode">
                        </el-table-column>
                        <el-table-column prop="organizationName" min-width="140" fixed="left"
                                            :label="$t('Organization.table.organizationName')" sortable="custom" sort-by="organizationName">
                        </el-table-column>
                        <el-table-column prop="power" min-width="200"
                                            :label="$t('Organization.table.power')" sortable="custom" sort-by="power">
                        </el-table-column>
                        <el-table-column prop="desc" min-width="200"
                                            :label="$t('Organization.table.desc')" sortable="custom" sort-by="desc">
                        </el-table-column>
                        <!-- <el-table-column prop="desc" min-width="140" fixed="left"
                                            :label="$t('Organization.table.desc')" sortable="custom" sort-by="providerName">
                        </el-table-column> -->
                        <el-table-column prop="status" min-width="110" sortable="custom"
                        :label="$t('Organization.table.status')" sort-by="status">
                        </el-table-column>

                        <el-table-column :label="$t('Organization.table.lastUpdatedBy')" min-width="120" sortable="custom" prop="lastUpdatedBy" sort-by="lastUpdatedBy">
                        </el-table-column>
                        <el-table-column :label="$t('Organization.table.lastUpdateTime')" min-width="180" sortable="custom" prop="lastUpdateTime" sort-by="lastUpdateTime">
                        </el-table-column>

                    </el-table>
                </transition>

            </div>
        </div>
        <div class="pageBox">
            <el-pagination @size-change="sizeChange"
                            @current-change="currentPageChange"
                            :current-page="pager.curPage"
                            :page-sizes="pager.sizes"
                            :page-size="pager.curSize"
                            :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
            </el-pagination>
        </div>

         <!--编辑对话框-->
        <transition enter-active-class="animated rotateIn" leave-active-class="animated rotateOut">
            <el-dialog :title="$t('label.dialogTitle')" :visible.sync="isShowEditForm" top="5vh">
                <el-form :model="editForm" ref="editForm" size="mini"
                        :label-position="editFormPosition" status-icon=status-icon :rules="editRules">
                    <el-form-item v-if="isShow" :label="$t('Organization.editLabel.organizationCode')"
                        :label-width="editformLabelWidth" prop="organizationCode">
                        <el-input v-model.trim="editForm.organizationCode" maxlength="20" :disabled="true"
                                :placeholder="$t('Organization.editLabel.placeholderOrganizationCode')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('Organization.editLabel.organizationName')"
                        :label-width="editformLabelWidth" prop="organizationName">
                        <el-input v-model.trim="editForm.organizationName" maxlength="50"
                                :placeholder="$t('Organization.editLabel.placeholderOrganizationName')"></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('Organization.editLabel.power')"
                        :label-width="editformLabelWidth" prop="power">

                    <el-checkbox-group v-model="checkList">
                        <el-checkbox :label="$t('Organization.editLabel.power1')"></el-checkbox>
                        <el-checkbox :label="$t('Organization.editLabel.power2')"></el-checkbox>
                        <el-checkbox :label="$t('Organization.editLabel.power3')"></el-checkbox>
                    </el-checkbox-group>

                        <!-- <el-input v-model="editForm.power" maxlength="100" type="textarea" :disabled="canEditCode"
                                placeholder=""></el-input> -->
                    </el-form-item>

                    <el-form-item :label="$t('Organization.editLabel.desc')"
                        :label-width="editformLabelWidth" prop="desc">
                        <el-input v-model="editForm.desc" maxlength="100" type="textarea"
                                :placeholder="$t('Organization.editLabel.placeholderDesc')"></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('Organization.queryLabel.status')"  :label-width="editformLabelWidth">
                        <el-select v-model="editForm.status" class="queryItemStyle">
                            <el-option :label="$t('label.available')" value="Available"></el-option>
                            <el-option :label="$t('label.invalid')" value="Invalid"></el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
                <div slot="footer">
                    <el-button size="mini" @click="isShowEditForm = false" :loading="loading">{{ $t('btnText.cancelBtnText') }}</el-button>
                    <el-button size="mini" type="primary" @click="submitForm('editForm')" :loading="loading">{{ $t('btnText.saveBtnText') }}</el-button>
                </div>
            </el-dialog>
        </transition>

         <!-- 授权对话框 -->
        <el-dialog :title="$t('label.dialogTitle')" :visible.sync="isShowSelectForm" top="5vh">
            <el-form :label="$t('Organization.editLabel.role')" :label-width="editformLabelWidth" prop="loginName">
                <template>
                    <el-checkbox-group v-model="checkList">
                        <el-checkbox :label="$t('Organization.editLabel.areaA')"></el-checkbox>
                        <el-checkbox :label="$t('Organization.editLabel.areaB')"></el-checkbox>
                        <el-checkbox :label="$t('Organization.editLabel.areaC')"></el-checkbox>
                    </el-checkbox-group>
                </template>
            </el-form>
            <div slot="footer">
                <el-button size="mini" @click="isShowSelectForm = false" :loading="loading">{{ $t('btnText.cancelBtnText') }}</el-button>
                <el-button size="mini" type="primary" @click="success" :loading="loading">{{ $t('btnText.saveBtnText') }}</el-button>
            </div>
        </el-dialog>

  </div>


</template>

<script>

import comBaseVue from '../../baseViewModel';

export default {
  mixins: [comBaseVue],
  name:'Organization',
  data () {

    return {
        queryformLabelWidthLong:"110px",
        isShowSelectForm: false,
        isInit:false,
        isShow:false,
        tableHeight:100,
        appDivStyle:{
            height:this.$store.getters.appHeight,
        },
        modelName:"system.model.Organization",
        // 查询条件
        formQueryCondition: {
            // organizationCode: {
            //     op: 'LIKE', // 操作符
            //     val: '' // 查询的值
            // },
            organizationName: {
                op: 'LIKE', // 操作符
                val: '' // 查询的值
            },
            status: {
                val: ''
            },
        },

        // 编辑面板绑定的对象
        editForm: {
            keyID: 0,
            version: 0,
            organizationCode: "",
            organizationName: "",
            power: "",
            desc: "",
            status: "",
        },
        // 编辑面板的验证规则
        editRules: {
            organizationCode: [{ required: true, message: this.$i18n.t('Organization.rules.placeholderOrganizationCode'), trigger: 'blur' }],
            organizationName: [{ required: true, message: this.$i18n.t('Organization.rules.placeholderOrganizationName'), trigger: 'blur' }],
            status: [{ required: false, message: this.$i18n.t('Organization.rules.placeholderStatus'), trigger: 'blur' }],
        },
        sort:{
            key: "lastUpdateTime",
            dir: "Desc"
        },

         checkList: [],
    }
  },
  methods:{
      test:function(btnCode){
          return true;
        },
    // 新增
    onNew: function() {
        this.isShowEditForm = true;
        if (this.$refs['editForm']) {
            this.$refs['editForm'].resetFields();
        }
        this.editForm.keyID = "";
        this.editForm.version = "";
        this.editForm.organizationCode = "";
        this.editForm.organizationName = "";
        this.editForm.power = "";
        this.editForm.desc = "";
        this.editForm.status = "有效";
        this.curCommand = "SaveNew";
        // this.canEditCode = false;
        this.isShow = false;
    },

    // 授权按钮单击事件
    authorize: function(index, row) {
        this.checkList = [],
        this.isShowSelectForm = true;
    },

     // 重置
    onReset:function(){
        if (this.$refs['form']) {
            this.$refs['form'].resetFields();
        }
        this.formQueryCondition.organizationName.val = "";
        this.formQueryCondition.status.val = "";
    },


    // 授权按钮单击事件
    editMenu: function(index, row) {

    },

    // 编辑按钮回调事件
    editCallback: function(isSuccess,json) {
        if(isSuccess){
            this.curCommand = "UpdateProc";
            this.isShowEditForm = true;
            if (this.$refs['editForm']) {
                this.$refs['editForm'].resetFields();
            }
            this.editForm = json;
            this.isShow = true;
            this.canEditCode = true;
        }
        else{
            this.$message({
                message: json.msg,
                type: 'warning'
                });
        }
    },

    success: function(){
        this.isShowSelectForm = false;
        this.$message({
                message: this.$i18n.t("Organization.editLabel.authorizationTip"),
                type: 'success'
        });
        this.queryTable();
    },

    initTable:function(){
        this.tableHeight = this.$refs.context.offsetHeight - this.$refs.queryBox.offsetHeight;
        this.isInit = true;
    },


  },
  mounted: function mounted() {
    this.onQuery();
    window.setTimeout(this.initTable,100);
  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
